<template>
  <div class="exhibitor-testimonials">
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">展商评语</h1>
        <p class="page-subtitle">听听往届展商的心声和评价</p>
      </div>
    </div>
    <div class="container">
      <section class="testimonials-section">
        <h2 class="section-title">展商评语</h2>
        <div class="testimonials-grid">
          <div class="testimonial-item" v-for="testimonial in exhibitorTestimonials" :key="testimonial.id">
            <div class="testimonial-content">
              <div class="quote-icon">
                <el-icon><ChatDotRound /></el-icon>
              </div>
              <p class="testimonial-text">{{ testimonial.content }}</p>
              <div class="testimonial-author">
                <div class="author-avatar">
                  <img :src="testimonial.avatar" :alt="testimonial.name">
                </div>
                <div class="author-info">
                  <h4>{{ testimonial.name }}</h4>
                  <p>{{ testimonial.position }}</p>
                  <p class="company">{{ testimonial.company }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ChatDotRound } from '@element-plus/icons-vue'

export default {
  name: 'ExhibitorTestimonials',
  setup() {
    // 展商评语数据
    const exhibitorTestimonials = ref([
      {
        id: 1,
        content: 'FAIR plus展会为我们提供了绝佳的展示平台，让我们能够接触到更多潜在客户，展会组织非常专业，服务也很周到。',
        name: '张明',
        position: '总经理',
        company: '机器人科技有限公司',
        avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face'
      },
      {
        id: 2,
        content: '通过参加FAIR plus展会，我们成功开拓了华南市场，建立了多个重要客户关系，展会效果超出预期。',
        name: '李华',
        position: '市场总监',
        company: '智能制造集团',
        avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=100&h=100&fit=crop&crop=face'
      },
      {
        id: 3,
        content: '展会的商务对接服务非常到位，帮助我们精准匹配了目标客户，大大提高了参展效率。',
        name: '王强',
        position: '销售总监',
        company: '自动化设备公司',
        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face'
      },
      {
        id: 4,
        content: 'FAIR plus展会的专业观众质量很高，都是我们的目标客户群体，参展效果非常好。',
        name: '陈丽',
        position: '副总经理',
        company: '工业机器人公司',
        avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face'
      }
    ])

    return {
      exhibitorTestimonials
    }
  }
}
</script>

<style scoped>
.exhibitor-testimonials {
  min-height: 100vh;
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.testimonials-section {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin: 2rem 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.testimonial-item {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
  border-radius: 15px;
  padding: 2rem;
  border: 1px solid #e0e7ff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.testimonial-content {
  position: relative;
}

.quote-icon {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #320063 0%, #667eea 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-icon .el-icon {
  font-size: 1.2rem;
  color: white;
}

.testimonial-text {
  color: #666;
  line-height: 1.8;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-info h4 {
  font-size: 1.1rem;
  color: #320063;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.author-info p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.author-info .company {
  color: #320063;
  font-weight: 600;
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .testimonials-section {
    padding: 2rem;
    margin: 1rem 0;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .page-subtitle {
    font-size: 1rem;
  }
}
</style> 